<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>list</title>
    <script src="../HTML/js/jquery-3.4.1.js"></script>
    <style>
        body{
            font: 16px "Microsoft YaHei";
        }
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        .nav-list{
            width: 220px;
            border-bottom: 1px solid #ccc;
        }
        .nav-list ul{
            display: none;
        }
        .nav-list>h3{
            margin: 0;
            position: relative;
            padding: 10px 20px;
            background-color: #1682c2;
            color: white;
            font-size: 16px;
            line-height: 20px;
            font-weight: normal;
            border-top: 1px solid #ccc;
            cursor: pointer;
        }
        .nav-list>h3:hover{
            background-color: #0192e8;
        }
        .nav-list>h3>span{
            position: absolute;
            width: 16px;
            height: 16px;
            background: url("sc/right.png") no-repeat;
            right: 20px;
            top: 12px;
        }

        .nav-list>.open span{
            position: absolute;
            width: 16px;
            height: 16px;
            background: url("sc/buttom.png") no-repeat;
            right: 20px;
            top: 12px;
        }
        .nav-list li>a{
            display: block;
            padding: 10px 20px;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            color: #333;
            font-size: 14px;
        }
        .nav-list li>a:hover{
            background-color: #1682c2;
        }

    </style>
</head>
<body>
<div class="nav-list">
    <h3>论坛系统<span></span></h3>
    <ul>
        <li><a href="/artdataDML?qqlx=cxqb" target="middle">系统主页</a></li>
        <li><a href="/StateDML?type=yhcx" target="middle">系统公告</a></li>
    </ul>
    <h3>个人信息<span></span></h3>
    <ul>
        <li><a href="/WebContent/HTML/UserPage/user_user/ShowData.jsp?id=${sessionScope.user.userId}" target="middle">查看我的资料</a></li>
        <li><a href="/DataDML?datatype=cx&id=${sessionScope.user.userId}" target="middle">修改我的资料</a></li>
        <li><a href="/VipTypeCZ?type=cxappliaction" target="middle">申请进度查询</a></li>
    </ul>
    <h3>安全中心<span></span></h3>
    <ul>
        <li><a href="/DataDML?datatype=cxmm&id=${sessionScope.user.userId}" target="middle">修改密码</a></li>
    </ul>
    <h3>走进圈子<span></span></h3>
    <ul>
        <li><a href="/artdataDML?qqlx=cxqb" target="middle">查看动态</a></li>
        <li><a href="/WebContent/HTML/UserPage/user_article/AddArticle.jsp" target="middle">发表动态</a></li>
        <li><a href="/artdataDML?qqlx=gldt" target="middle">管理我的动态</a></li>
    </ul>
    <h3>评论专区<span></span></h3>
    <ul>
        <li><a href="/CommentDML?czlx=cx" target="middle">我的评论</a></li>
        <li><a href="/CommentDML?czlx=svpl" target="middle">删除评论</a></li>
    </ul>
    <h3>会员专区<span></span></h3>
    <ul>
        <li><a href="/WebContent/HTML/UserPage/ljVip.jsp" target="middle">了解会员</a></li>
        <li><a href="/VipTypeCZ?type=cxviptype" target="middle">成为会员</a></li>
        <li><a href="/VipTypeCZ?type=cxmyappliaction" target="middle">我的会员</a></li>
    </ul>
    <h3>友情链接<span></span></h3>
    <ul>
        <li><a href="http://www.baidu.com/" target="middle">学校官网</a></li>
        <li><a href="http://hall.nmu.edu.cn/" target="middle">智慧校园</a></li>
        <li><a href="http://www.baidu.com/" target="middle">教务系统</a></li>
        <li><a href="http://www.baidu.com/" target="middle">民大风采</a></li>
    </ul>

</div>
<script>
    $(document).ready(function(){
        $("h3").click(function(){
            $(this)    //当前点击的DOM对象
                .toggleClass("open")    //添加箭头改变类
                .siblings("h3")     //除点击之外的所有其他兄弟元素
                .removeClass("open")   //移除箭头改变类
                .end()      //返回破坏性操作之前的DOM对象，就是所点击的
                .next("ul")   //点击的的下一个元素ul
                .slideToggle()   //展开收缩
                .siblings("ul")   //之外的所有兄弟元素ul
                .slideUp();   //全部收缩

        })
    })
</script>

</body>
</html>